<template>
  <a
   href="#"
    class="my-link"
    :class="[`my-link--${type}`, {'is-underline': underline}]"
    >
    <span class="my-link--inner">
      <slot>文字链接</slot>
    </span>
  </a>
</template>

<script>
export default {
  name: 'my-link',
  props: {
    // 类型
    type: {
      type: String,
      default: 'default',
      validator (value) {
        return ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(value)
      }
    },
    // 是否有下划线
    underline: {
      type: Boolean,
      default: true
    }
    // 链接地址  测试使用attrs方式,不声明属性
    // 还是可以使用的,可以不声明这个属性,但是有些规则需要遵守
    // href: {
    //   type: String,
    //   default: '#'
    // }
  }
}
</script>

<style lang="less">
.my-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  // 底部线段
  &.is-underline:hover:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    bottom: 0;
    border-bottom: 1px solid #409eff;
  }
  // 默认链接样式
  &.my-link--default {
    color: #606266;
    //   hover的 效果
    &:hover {
      color: #409eff;
    }
  }
  // 主要链接样式
  &.my-link--primary {
    color: #409eff;
    &:hover {
      color: #66b1ff;
    }
    &.is-underline:after {
      border-color: #409eff;
    }
  }
  // 成功链接样式
  &.my-link--success {
    color: #67c23a;
    &:hover {
      color: #85ce61;
    }
    &.is-underline:after {
      border-color: #67c23a;
    }
  }
  // 警告链接样式
  &.my-link--warning {
    color: #e6a23c;
    &:hover {
      color: #ebb563;
    }
    &.is-underline:after {
      border-color: #e6a23c;
    }
  }
  // 危险链接
  &.my-link--danger {
    color: #f56c6c;
    &:hover {
      color: #f78989;
    }
    &.is-underline:after {
      border-color: #f56c6c;
    }
  }
  // 信息链接
  &.my-link--info {
    color: #909399;
    &:hover {
      color: #a6a9ad;
    }
    &.is-underline:after {
      border-color: #909399;
    }
  }
  // 兄弟 my-link 设置间隙
  & + .my-link {
    margin-left: 5px;
  }
}
</style>
